<template>
  <ele-dropdown
    :items="[
      {
        title: '刷新内容',
        command: 'refresh',
        icon: ReloadOutlined,
      },
      {
        title: '编辑卡片',
        command: 'edit',
        icon: EditOutlined,
      },
      {
        title: '删除卡片',
        command: 'remove',
        icon: DeleteOutlined,
        danger: true,
        divided: true,
      },
    ]"
    :icon-props="{ size: 15 }"
    placement="bottom-end"
    style="cursor: pointer"
    :popper-options="{
      strategy: 'fixed',
      modifiers: [{ name: 'offset', options: { offset: [12, 12] } }],
    }"
    @command="handleCommand"
    class="demo-more-icon"
  >
    <el-icon style="outline: none">
      <MoreOutlined style="transform: scale(1.1)" />
    </el-icon>
  </ele-dropdown>
</template>

<script setup>
import {
  MoreOutlined,
  ReloadOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@/components/icons";

const emit = defineEmits(["command"]);

const handleCommand = (command) => {
  emit("command", command);
};
</script>

<style lang="scss" scoped>
.demo-more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-placeholder);
  font-size: 14px;
  border-radius: 6px;
  margin: 0 -10px 0 0;
  transition: all 0.2s;

  & > .el-icon {
    width: 26px;
    height: 26px;
  }

  &:hover {
    color: var(--el-text-color-regular);
    background: var(--el-fill-color-light);
  }
}
</style>
